<script>
import TokenAxios from "@/http/request/TokenAxios";
import BaseUrl from "@/http/request/BaseUrl";
export default{
  methods:{
    getUserLog(){
      TokenAxios.get(BaseUrl.ADMIN_ACCOUNT+'/admin/log')
          .then((response)=>{
            let json = response.data;
            if(json.state ==20000){
              this.tableData = json.data;
              console.log(json.data);
              console.log(this.tableData)
            }
            console.log(json)
          })
    },
    searchArticles(){
      let adminDateTimeLogDTO = {
        startTime:this.timeValue[0],
        endTime:this.timeValue[1]
      }
      let url = BaseUrl.ADMIN_ACCOUNT+'/admin/log/time';
      TokenAxios.post(url,adminDateTimeLogDTO).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '操作成功!',
            type: 'success'
          });
          this.tableData = jsonResult.data;
          console.log(jsonResult.data);
          console.log(this.tableData)
        }
      })
      console.log(this.timeValue)
    },
    exportLog(){
      //导出

    }
  },
  mounted() {
    this.getUserLog();
  },

  data() {

    return {
      imgShow: false,
      title: '',
      timeValue: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: []
    }
  },

    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(pageNum) {
      this.listQuery.pageNum = pageNum
      this.getList()
    }

}
</script>

<template>
  <el-container>
      <el-header style="height: 58px;text-align: left;">
        <div class="block">
          <span>操作时间:</span>&nbsp;&nbsp;
          <el-date-picker
              v-model="timeValue"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left:1rem"
            @click="searchArticles">筛选
        </el-button>
        <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left:1rem"
            @click="exportLog">导出
        </el-button>
      </el-header>
      <el-main>
          <el-table :data="tableData" border stripe >
            <el-table-column prop="username" label="操作人" width="120" style="width: auto;">
            </el-table-column>
            <el-table-column prop="ip" label="设备ip" style="width: auto;">
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间" width="140" style="width: auto;">
            </el-table-column>
            <el-table-column prop="operationContent" label="操作内容" style="width: auto">
            </el-table-column>
          </el-table>
      </el-main>
  </el-container>
</template>

<style scoped>
.el-header{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 749px;
  margin-top: 15px;
}
.block{
  display: inline;
}

</style>